<template>
	<div class="order-list">
		<div class="card-item" v-for="(order, i) in orderList" :key="i">
			<van-cell class="card-header" :title="`订单ID：${order.id}`" :label="`订单时间：${order.order_time}`">
				<template #default>
					<span>{{orderStatus(order)}}</span>
					<span v-if="order.status!=-1" @click="onClickOrderCancel(order.id)">|取消订单</span>
				</template>
			</van-cell>
 
			<van-row v-for="item in order.detailList" :key="item.id" @click="onClick2OrderDetail(order.id)">
				<van-col span="6">
					<van-image :src="APIDomainName + item.product_pic"></van-image>
				</van-col>
				<van-col span="18">
					<van-cell :title="item.product_name" :label="item.product_spec" class="van-ellipsis"></van-cell>
					<van-row style="padding-left: 20px;text-align: right;" type="flex" justify="space-between">
						<van-col span="5">{{item.price}}</van-col>
						<van-col span="4">X</van-col>
						<van-col span="5">{{item.count}}</van-col>
						<van-col span="3">=</van-col>
						<van-col span="7">{{item.price*item.count }}</van-col>
					</van-row>
				</van-col>
			</van-row>
			<div class="amount">实付金额：<span style="color:red">¥{{ orderAmount(order) }}</span>
			</div>
		</div>
	</div>
</template>
 
<script>
	import { getOrderListAPI, cancleOrderByIdAPI } from "@/api/order.js";
	export default {
		data() {
			return {
				orderList: [],
			};
		},
		//生命周期钩子函数
		created() {
			this.getOrderList();
		},
 
		methods: {
			//获取订单列表 
			getOrderList() {
				getOrderListAPI().then(result => {
					this.orderList = result.data;
				});
			},
			// 触发导航到订单详情（此时该路由功能还没有实现）
			onClick2OrderDetail(id) {
				this.$router.push({
					name: "orderDetail",
					query: {id	}
				});
			},
			// 触发取消订单
			onClickOrderCancel(id) {
				//调用接口
				cancleOrderByIdAPI(id).then(() => {
					this.getOrderList();
				});
			},
 
			//计算一个订单的总金额
			orderAmount(order) {
				let amount = 0;
				order.detailList.forEach(item => {
					amount += item.count * item.price;
				});
				return amount.toFixed(2);
			},
			//订单状态格式转换
			orderStatus(order) {
				let status = "未知";
				switch (order.status) {
					case 0:
						status = "未支付";
						break;
					case 1:
						status = "已支付";
						break;
					case -1:
						status = "已取消";
						break;
				}
				return status;
			},
		},
	};
</script>
 
<style lang="less" scoped>
	.order-list {
		background-color: #f3f3f3;
	}
 
	.card-item {
		margin: 10px;
		padding: 10px;
		background-color: white;
		border-radius: 10px;
		font-size: 16px;
	}
 
	.card-header {
		padding: 5px 5px;
 
		font-size: 16px;
		font-weight: bolder;
		display: flex;
		justify-content: space-between;
 
		/deep/ .van-cell__value {
			color: #1f0300;
		}
	}
 
	.amount {
		padding: 5px 5px;
		text-align: right;
		color: #6b6969;
		font-weight: bold;
		background-color: rgb(216, 219, 217);
	}
</style>